<!-- 用药临床观察 clinical_observation -->

<template>
    <div>
        <!-- 确保方法名的大小写一致 -->
        <el-button size="small" icon="Plus" @click="addObservation">新增观察</el-button>
        <!-- 使用 v-html 显示 html 内容 -->
        <span v-html="html"></span>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'MedicationObservation',
    setup() {
        const html = ref(`
        <p>Using text interpolation: 文章html内容回显示测试-----</p>
        <p>Using v-html directive: <span style="background-color: #f556f5; color: white; padding: 8px; border-radius: 4px;">文章html内容回显示测试#####################</span></p>
        `);

        const router = useRouter();

        const addObservation = () => {
            router.push({ path: '/clinical-observation' });
            console.log('跳转到用药临床观察页面');
        };

        return {
            html,
            addObservation,
        };
    },
});
</script>
